import React from "react";
import Reflux from "reflux";
import {LdhFieldSet, LdhPage, LdhPageBody, LdhPageTable, LdhSearchForm, LdhSearchItem} from "@biz/PageCompnents";
import {LdhButton, LdhInput, LdhObjListSelect, LdhTable, Message} from "@biz/Components";
import GUtils from "@/utils";

import {createAction, jparkingColumns} from "./Action";
import Store from "./Store";

import "./style.less";
import {Col, Row} from "antd";
import {Link} from "react-router-dom";

let Config = {};
const prefix="super-page"
export default class SuperPage extends Reflux.Component {
    constructor (props) {
        super(props);
        this.action = createAction();
        this.store = new Store(props, {}, this.action);
    }
    componentDidMount() {
        this.action.jparkingAccountList();
    }



    componentWillUnmount () {
        this.action.unmount();
    }

    //初始化店铺经纬度信息
    handleInitShopGeo(){
        GUtils.confirm("确认",<div>确定要【<b>初始化店铺经纬度信息</b>】?</div>,()=>this.action.initShopGeo());
    }

    //充值订单支付查询
    handleQueryOrderPayInfo(){
        let {rechargeOrderNo} = this.state;
        if(!rechargeOrderNo){
            Message.warning("请先输入充值单号/会员单号");
            return;
        }
        GUtils.confirm("确认",<div>确定要查询【<b>{rechargeOrderNo}</b>】充值信息?</div>,()=>this.action.queryWxPayInfo(rechargeOrderNo));
    }
    //充值订单退款查询
    handleQueryOrderRefundInfo(){
        let {rechargeOrderNo4Refund} = this.state;
        if(!rechargeOrderNo4Refund){
            Message.warning("请先输入充值单号/会员单号");
            return;
        }
        GUtils.confirm("确认",<div>确定要查询【<b>{rechargeOrderNo4Refund}</b>】退款信息?</div>,()=>this.action.queryWxRefundInfo(rechargeOrderNo4Refund));
    }

    handleTestDevice(){
        let {subAddress,pubAddress} = this.state;
        if(!subAddress || !pubAddress){
            Message.warning("请先输入开关的订阅和发布地址");
            return;
        }
        this.action.testDevice(subAddress, pubAddress);
    }
    handleBindDevice(){
        let {subAddress,pubAddress, deviceId} = this.state;
        if(!subAddress || !pubAddress){
            Message.warning("请先输入开关的订阅和发布地址");
            return;
        }
        if(!deviceId){
            Message.warning("请先输入内部设备ID");
            return;
        }
        GUtils.confirm("确认",<div>确定要将开关和内部设备【<b>{deviceId}</b>】进行绑定?</div>,()=>this.action.bindDevice(subAddress, pubAddress, deviceId));
    }
    handleChange(field, e){
        console.log(field, e);
        let newState={};
        newState[field] = e.target.value.trim();
        this.setState(newState)
    }
    handleSelectChange(field, v){
        console.log(field, v);
        let newState={};
        newState[field] = v;
        this.setState(newState)
    }
    handleDeviceChange(v,a){
        this.setState({deviceId:v, deviceIdSelectValue:v})
    }

    // 停车券，根据车牌号进行减免
    handleJparkingDiscount(){
        let {jparkingAccountId, jparkingCarNo} = this.state;
        if(!jparkingAccountId){
            Message.warning("请先选择账号");
            return;
        }
        if(!jparkingCarNo){
            Message.warning("请先输入车牌号");
            return;
        }
        GUtils.confirm("确认",<div>确定要对车牌号【<b>{jparkingCarNo}</b>】进行停车优惠?</div>,()=>this.action.jparkingDiscount(jparkingAccountId, jparkingCarNo));

    }
    handleJparkingSearch(values){
        let {jparkingAccountId} = this.state;
        if(!jparkingAccountId){
            Message.warning("请先选择账号");
            return;
        }
        console.log(values);
        let so = {...values, pageIndex: 1};
        this.action.jparkingSearch(jparkingAccountId, so);
    }
    render () {
        let {geoLoading,
            payQueryLoading, rechargeOrderNo,
            refundQueryLoading, rechargeOrderNo4Refund,
            testDeviceLoading, subAddress, pubAddress,
            bindDeviceLoading, deviceId, deviceList=[],deviceIdSelectValue,
            jparkingAccountList=[],jparkingAccountId,
            jparkingCarNo="", jparkingDiscountLoading,
            jparkingVoList=[], jparkingSearchLoading} = this.state;
        console.log("====", jparkingVoList, jparkingColumns, jparkingAccountList)
        return <LdhPage className={prefix}>

            <LdhPageBody>
                <LdhFieldSet title="初始化店铺经纬度信息" className="flex-between">
                    <LdhButton type="primary" loading={geoLoading} onClick={this.handleInitShopGeo.bind(this)}>执行</LdhButton>
                    <div className="tip">将经纬度信息存入redis缓存中，以便小程序获取根据经纬度计算获取最近的店铺列表</div>
                </LdhFieldSet>

                <LdhFieldSet title="充值/会员订单支付查询"  className="flex-between">
                    <Row  gutter={20}>
                        <Col span={4}> <LdhInput placeholder="内部充值单号" value={rechargeOrderNo} onChange={this.handleChange.bind(this,"rechargeOrderNo")}></LdhInput></Col>
                        <Col span={20}>
                            <LdhButton type="primary" loading={payQueryLoading} onClick={this.handleQueryOrderPayInfo.bind(this)}>执行</LdhButton>
                            <div className="tip">
                                <div >根据内部充值/会员单号，查询支付状态，若支付成功，则对充值/会员订单完成充值操作，当充值/会员订单【待支付，已关闭】会进行处理</div>
                                <div >不影响支付通知消息的处理，只是为了补偿</div>
                            </div>
                        </Col>
                    </Row>
                </LdhFieldSet>

                <LdhFieldSet title="充值/会员订单退款查询"  className="flex-between">
                    <Row gutter={20}>
                        <Col span={4}> <LdhInput placeholder="内部充值单号" value={rechargeOrderNo4Refund} onChange={this.handleChange.bind(this,"rechargeOrderNo4Refund")}></LdhInput></Col>
                        <Col span={20}>
                            <LdhButton type="primary" loading={refundQueryLoading} onClick={this.handleQueryOrderRefundInfo.bind(this)}>执行</LdhButton>
                            <div className="tip">
                                <div >根据内部充值/会员单号，查询退款状态，若退款成功，则对充值/会员订单完成退款操作，当充值/会员订单【退款中】时，进行处理</div>
                                <div >不影响退款通知消息的处理，只是为了补偿</div>
                            </div>
                        </Col>
                    </Row>
                </LdhFieldSet>

                <LdhFieldSet title="开关设备测试"  className="flex-between">
                    <Row gutter={20}>
                        <Col span={4}> <LdhInput placeholder="开关订阅消息地址" value={subAddress} onChange={this.handleChange.bind(this,"subAddress")}></LdhInput></Col>
                        <Col span={4}> <LdhInput placeholder="开关发布消息地址" value={pubAddress} onChange={this.handleChange.bind(this,"pubAddress")}></LdhInput></Col>

                            {deviceList.length>0 &&   <Col span={4}><LdhObjListSelect list={deviceList} labelField="label" value={deviceIdSelectValue} onChange={this.handleDeviceChange.bind(this)} className="w-full"/>   </Col>}

                        <Col span={2}>
                            <LdhButton type="primary" loading={testDeviceLoading} onClick={this.handleTestDevice.bind(this)}>测试</LdhButton>
                        </Col>
                        <Col span={10}>
                            <div className="tip">
                                <div >根据开关订阅消息地址发送获取开关基本信息的请求，测试开关是否正常运作</div>
                                <div >由于消息是异步的，后台监听15秒，超时就返回</div>
                            </div>
                        </Col>
                    </Row>
                    <Row gutter={20} className="mt-20">
                        <Col span={4}> <LdhInput placeholder="内部设备ID" value={deviceId} onChange={this.handleChange.bind(this,"deviceId")}></LdhInput></Col>

                        <Col span={2}>
                            <LdhButton type="primary" loading={bindDeviceLoading} onClick={this.handleBindDevice.bind(this)}>绑定</LdhButton>
                        </Col>
                        <Col span={16}>
                            <div className="tip">
                                <div >根据开关订阅消息地址发送修改MQTT地址的请求，将开关和内部指定的设备进行绑定</div>
                                <div >由于设备返回的消息地址无法确定，需要手工测试查看是否已成功修改。 后端会调用打开开关接口，若开关工作说明已成功绑定</div>
                                <div >设备ID信息 {deviceId && <Link to={`${window.CONFIG.PAGE_DEVICE}${window.CONFIG.PAGE_DETAIL}?id=${deviceId}`}>查看</Link>}</div>
                            </div>
                        </Col>
                    </Row>
                </LdhFieldSet>

                <LdhFieldSet title="停车券测试"  className="flex-between">
                    <Row  gutter={20} className="mb-10">
                        <Col span={4}>
                            <LdhObjListSelect placeholder="账号" list={jparkingAccountList} value={jparkingAccountId} onChange={this.handleSelectChange.bind(this,"jparkingAccountId")} hideAll className="w-134 mb-10"/>
                        </Col>
                    </Row>
                    <Row  gutter={20}>
                        <Col span={4}> <LdhInput placeholder="车牌号" value={jparkingCarNo} onChange={this.handleChange.bind(this,"jparkingCarNo")}></LdhInput></Col>
                        <Col span={20}>
                            <LdhButton type="primary" loading={jparkingDiscountLoading} onClick={this.handleJparkingDiscount.bind(this)}>执行</LdhButton>
                            <div className="tip">
                                <div >根据车牌号进行优惠减免.</div>
                                <div >车牌号样例：浙-A12345</div>
                            </div>
                        </Col>
                    </Row>
                    <h3  className="mt-20">优惠使用记录查询</h3>
                    <div>
                        <LdhSearchForm onSearch={this.handleJparkingSearch.bind(this)} loading={jparkingSearchLoading}>
                            <LdhSearchItem label="优惠编号" name="discountCode">
                                <LdhInput/>
                            </LdhSearchItem>
                            <LdhSearchItem label="车牌号" name="carNo">
                                <LdhInput/>
                            </LdhSearchItem>
                        </LdhSearchForm>
                    </div>
                    <Row>
                        <LdhTable dataSource={jparkingVoList} columns={jparkingColumns} rowKey="id" sortFields={["carNo", "discountCode", "planUseTime"]} loading={jparkingSearchLoading}/>

                    </Row>
                </LdhFieldSet>

            </LdhPageBody>
        </LdhPage>

    }


}
